<template>
  <transition name="slideFromBottom" v-if="isshow">
    <div class="arealist">
      <q-tabs :refs="$refs" v-model="SelectedTab">
        <q-tab name="tab-1"> {{selectedPro ? selectedPro.name : '请选择' }} </q-tab>
        <q-tab name="tab-2"> {{selectedCity ? selectedCity.name : '请选择' }}  </q-tab>
        <q-tab name="tab-3"> {{selectedDist ? selectedDist.name : '请选择' }}  </q-tab>
      </q-tabs>
      <!-- Targets -->
      <div ref="tab-1">
        <div class="plist">
          <swiper :options="swiperOption" class="swiper-box">
            <swiper-slide v-for="p in provlist" :key="p.code" class="swiper-item">
              <div v-on:click="selectPro(p)" v-bind:class="{active:selectedPro && p.code == selectedPro.code}"><p>
                {{p.name}}</p></div>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>
      </div>
      <div ref="tab-2">
        <div class="plist">
          <div v-if="citylist.length > 0">
            <swiper :options="swiperOption" class="swiper-box">
              <swiper-slide v-for="p  in citylist" :key="p.code" class="swiper-item">
                <div v-on:click="selectCity(p)" v-bind:class="{active:selectedCity && p.code == selectedCity.code}"><p>
                  {{p.name}}</p></div>
              </swiper-slide>
              <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
          </div>
        </div>
      </div>
      <div ref="tab-3">
        <div class="plist">
          <div v-if="districtlist.length > 0">
            <swiper :options="swiperOption" class="swiper-box">
              <swiper-slide v-for="(p, key) in districtlist" :key="p.code" class="swiper-item">
                <div @click="selectDist(p)" v-bind:class="{active:selectedDist && p.code == selectedDist.code}"><p>
                  {{p.name}}</p></div>
              </swiper-slide>
              <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
  import {Province, City, Area} from '../../common/js/area'
  import Vue from 'vue'
  import VueAwesomeSwiper from 'vue-awesome-swiper'
  Vue.use(VueAwesomeSwiper)
  export default({
    props: {
      'isshow': false,
      'pCode': null,
      'cCode': null,
      'dCode': null
    },
    data () {
      return {
        SelectedTab: 'tab-1',
        provlist: {},
        citylist: {},
        districtlist: {},
        'swiperOption': {
          direction: 'vertical',
          slidesPerView: 6,
          paginationClickable: true,
          spaceBetween: 1
        },
        selectedPro: null,
        selectedCity: null,
        selectedDist: null
      }
    },
    computed: {
      getItem () {

      }
    },
    beforeCreate () {

    },
    created () {
      let _self = this
      this.provlist = Province
      this.selectedPro = this.provlist.find(item => {
        return parseInt(item.code) === parseInt(_self.pCode)
      })

      if (this.selectedPro) {
        this.getCityList(this.selectedPro)
        this.selectedCity = this.citylist.find(item => {
          return parseInt(item.code) === parseInt(_self.cCode)
        })
        if (this.selectedCity) {
          this.getDistList(this.selectedCity)
          this.selectedDist = this.districtlist.find(item => {
            return parseInt(item.code) === parseInt(_self.dCode)
          })
        }
      }
      this.fadeAddress(1)
    },
    mounted () {

    },
    methods: {
      selectPro (pro) {
        this.SelectedTab = 'tab-2'
        this.selectedPro = pro
        this.selectedCity = this.selectedDist = null
        this.getCityList(pro)
      },
      selectCity (selectedCity) {
        this.SelectedTab = 'tab-3'
        this.selectedCity = selectedCity
        this.selectedDist = null
        this.getDistList(selectedCity)
      },
      selectDist (dist) {
        this.selectedDist = dist
        this.fadeAddress()
      },
      getCityList (pro) {
        this.citylist = City.filter(value => {
          return value.parentId === pro.code
        })
      },
      getDistList (scity) {
        this.districtlist = Area.filter(value => {
          return value.parentId === scity.code
        })
      },
      fadeAddress (flag = 2) {
        console.log('22222222222222')
        this.$emit('fadeAddress', this.selectedPro, this.selectedCity, this.selectedDist, flag)
      }
    },
    components: {}
  })
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/redifined.styl"
  .arealist
    position fixed
    left 0
    right 0
    bottom 0
    z-index 3
    -webkit-transform translateY(0)
    transform translateY(0)
    .q-tabs, .q-tab, .q-tabs .left-scroll, .q-tabs .right-scroll
      min-height auto
      font-size 14px
    .q-tabs
      color #666
      background #fff
      border-bottom: 1px solid #cb934b;
      .q-tab
        &.active
          color #fff
          background yellowColor
          border none
    .plist
      & > div
        p
          setFontsize(14px)
          margin 0
    .swiper-container
      height 300px
      background #fff
      .swiper-slide
        display flex
        justify-content flex-start
        & > div
          display flex
          justify-content flex-start
          width: 100%;
          &.active
            background #eee
          p
            padding-left cal(30) rem
            align-self center

</style>
